<!doctype html>
<html>
  <head>
    <style>
      #box {
        background-color: #000;
        width: 100px;
        height: 100px;
        margin-top: 100px;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script src="doppler.js"></script>
    <script>
      window.addEventListener('load', function() {
        window.doppler.init(function(bandwidth) {
          var threshold = 4;
          if (bandwidth.left > threshold || bandwidth.right > threshold) {
            var scale    = 10;
            var baseSize = 100;
            var diff = bandwidth.left - bandwidth.right;
            var dimension = (baseSize + scale*diff) + 'px';
            document.getElementById('box').style.width  = dimension;
            document.getElementById('box').style.height = dimension;
          }
        });
      });
    </script>
  </body>
</html>
